<template>
    <div class="select-data-container" style="width: 100%">
      <div class="select-box" style="width: 100%">
        <el-select
          :value="showName || projectName"
          v-bind="$attrs"
          :disabled="true"
          style="display: block;width: 100%"/>
        <i
          class="icon el-icon-search active-search-icon"
          v-show="!isDisabled"
          @click="dialogVisible = true"
        ></i>
        <el-dialog
          title="项目列表"
          :visible.sync="dialogVisible"
          width="600">
          <el-form :model="companyParams" ref="queryForm" :inline="true">
            <el-form-item label="项目名称" prop="buildType">
              <el-input
                v-model="companyParams.projectName"
                placeholder="请输入项目名称"
                clearable
                size="small"
                style="width: 240px"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="getCompanyData">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetCompany">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table
            :data="tableData"
            border
            size="mini"
            style="width: 100%">
            <el-table-column
              prop="projectName"
              label="项目名称">
            </el-table-column>
            <el-table-column
              prop="projectNumber"
              label="项目编号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="pigfarmName"
              label="猪场名称"
            >
            </el-table-column>
            <el-table-column
              prop="pigfarmNumber"
              label="猪场编号">
            </el-table-column>

            <el-table-column label="操作" prop="status" align="center" width="100" >
              <template slot-scope="scope">
                <el-link type="primary"  @click="handelClick(scope.row)">使用</el-link>
              </template>
            </el-table-column>

          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="companyParams.pageNum"
            :limit.sync="companyParams.pageSize"
            @pagination="getCompanyData"
          />
        </el-dialog>
      </div>
    </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name: "loadingSearchFormCompany",
    components: {},
    directives: {},
    filters: {},
    mixins: [],
    model: {},
    props: {
      projectName: {
        type: String,
        default:''
      },

      isDisabled: {
        type: Boolean,
        default:false
      },
    },
    data() {
      return {
        dialogVisible:false,
        tableData:[],
        showName:'',
        companyParams:{
          pageSize:10,
          pageNum:1,
          projectName:''
        },
        total:0
      }
    },
    computed: {

    },
    watch: {

    },
    created() {
      this.getCompanyData();
      this.showName = this.projectName
    },
    methods: {
      resetCompany(){
        this.companyParams = {
          pageSize:10,
          pageNum:1,
          projectName:''
        }
        this.getCompanyData()
      },
      getCompanyOptions() {
        return request({
          url: `/pigfarm-project/like`,
          method: 'get',
          params: {...this.companyParams}
        })
      },
      getCompanyData(){
        this.getCompanyOptions().then(
          response => {
            if(response && response.code ===0){
              this.tableData = response.data.records
              this.total = response.data.total
            }else{
              this.msgError(response.msg)
            }
            this.loading = false;
          }
        );
      },
      handelClick(row){
        this.$emit('changeCom',{...row})
        this.showName = row.projectName
        this.dialogVisible = false
      }
    },
  }
</script>

<style scoped lang="scss">
  .active-search-icon{
    color: #1890ff !important;
    font-weight: bold;
  }
  .active-search-icon :hover{
    color: #1890ff22 !important;
    font-weight: bold;
  }
  .select-data-container {
    position: relative;
    ::v-deep .el-input {
      &:hover {
        cursor: pointer;
      }
      input {
        &:hover {
          cursor: pointer;
        }
      }
    }
    .select-box {
      position: relative;
      .icon {
        cursor: pointer;
        color: #c0c4cc;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    ::v-deep .el-select {
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
      .el-input__suffix {
        display: none;
        .el-icon-arrow-up {
          display: none;
        }
      }
      &:hover .el-input__suffix {
        display: inline;
        margin-right: 16px;
      }
    }
    ::v-deep .is-disabled .el-input__inner {
      color: #4d4d4d;
    }


  }
  .select-tree {
    display: none;
  }
</style>
